<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getDepsService } from '@/api/consult'
import type { subDep, TopDep } from '@/types/consult'
import emptyImage from '@/assets/empty.png'
import { useConsultStore } from '@/stores'
const consultStore = useConsultStore()

const deps = ref<TopDep>([])
const getDeps = async () => {
  const res = await getDepsService()
  deps.value = res
}
const active = ref(0) // 选中一级科室项索引
// 二级科室
const subDeps = computed<subDep[]>(() => {
  return deps.value[active.value]?.child || []
})
onMounted(() => {
  getDeps()
})
</script>

<template>
  <!-- 2. 极速问诊-选择科室 -->

  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
    <div class="loading" v-if="!deps.length">
      <van-loading type="spinner" vertical color="#16c2a3">加载中... </van-loading>
    </div>
    <div class="wrapper" v-else>
      <!-- 一级科室 -->
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="topDep in deps" :key="topDep.id" :title="topDep.name" />
      </van-sidebar>
      <!-- 二级科室 -->
      <div class="sub-dep">
        <router-link
          v-for="subDep in subDeps"
          :key="subDep.id"
          to="/consult/illness"
          @click="consultStore.setDep(subDep.id)"
          >{{ subDep.name }}</router-link
        >
        <template v-if="!subDeps.length">
          <van-empty :image="emptyImage" description="暂未开放科室,请谅解~"></van-empty>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-sidebar {
  width: 114px;
  &-item {
    padding: 14px;
    color: var(--cp-tag);
    &--select {
      color: var(--cp-price);
      font-weight: bold;
      &::before {
        // display: none;
        --van-sidebar-selected-border-width: 5px;
        --van-sidebar-selected-border-height: 25px;
        border-radius: 2px;
      }
    }
  }
}
.consult-dep-page {
  padding-top: 46px;
}
.loading {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--cp-bg);
}
.wrapper {
  height: calc(100vh - 46px);
  overflow: hidden;
  display: flex;

  .sub-dep {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    > a {
      display: block;
      padding: 14px 30px;
      color: var(--cp-dark);
    }
  }
}
</style>
